<template>
	<view  style="height: 100%;">
		<!-- 分类 -->
	  <view class="classification" v-if="showclassification" style="height: 100%;">
		<!-- 搜索框 -->
		<view id="search">
			<icon type="search" size="15" class="search_icon"/>
			<input type="text" class="search_input" placeholder="搜索心仪的商品" placeholder-class="search_placeholder" @click="goSearchGoods()" disabled></input>
		</view>
		<view style="height: 100%;">
			<scroll-view class="nav-top" scroll-x="true" :scroll-left="'width:'+width+'px'">
				<view class="nav-top-item">
					<view @click="commodityClickMain(index)"  :class="index==commodityActive?'commodityActive':''" v-for="(commodityList,index) in goodsList" :key="commodityList.id">{{commodityList.name}}</view>
				</view>
			</scroll-view>
			<view class="page-body">
				<scroll-view class="nav-left" scroll-y="true"  @scroll="scroll"  scroll-with-animation :style="'height:'+height+'px'" :scroll-top="scrollTop">
					<view class="nav-left-item" @click="categoryClickMain(index)" :class="index==categoryActive?'categoryActive':''"
					    v-for="(categoryList,index) in  goodsList[commodityActive].list" :key="categoryList.id" >
						{{categoryList.name}}
					</view>
				</scroll-view>
				<scroll-view class="nav-right" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation @scrolltolower="pagingDate(commodityActive,categoryActive)" >
					<view class="product_show">
						<view class="products" v-for="(good,index) in goodsList[commodityActive].list[categoryActive].goods" :key="index">
							<image :src="good.mainImg" class="products_img" mode="aspectFit" lazy-load="true" @click="toProductDetails(good.id)"></image>
							<view class="products_text">
								<text>{{good.goodName}}</text>
							</view>
							<view class="products_price">
								<text>￥{{good.sellingPrice}}</text>
								<text>￥{{good.originalPrice}}</text>
							</view>
							<image src="../../../static/images/shopping_car_03.png" class="products_shopping_car" mode="aspectFill" lazy-load="true" @click="toShopCar(index,commodityActive,categoryActive)"></image>
						</view>
					</view>
					<view style="height:30%;width:100%"></view>
				</scroll-view>
			</view>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		components: {
		
		},
		data() {
			return {
				goodsList:[],
				categoryList:"",
				commodityList:"",
				height: 0,
				width:0,
				categoryActive: 0,
				commodityActive:0,
				scrollTop: 0,
				scrollHeight: 0,
				show_search:true,
				show_commodity:false,
				explosiveGoodsDate:[],
				selectIndex:0,
				showclassification:false,
				//请求商品列表数量
				pagesize:8,
				sum:0
			};
		},
		methods: {		
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			//一级
			commodityClickMain(index) {
				this.commodityActive = index;
				this.categoryActive=0;
			},
			//二级
			categoryClickMain(index) {
				this.categoryActive = index;
				this.scrollTop = -this.scrollHeight * index;
			},
			//跳转搜索商品界面
			goSearchGoods(){
				uni.navigateTo({
					url:"../../home/Search/Search"
				})
			},		
			//跳转商品详情
			toProductDetails(id){
				uni.navigateTo({
					url:"../../productDetails/productDetails?id="+id
				})
			},
			//获取数据
			getCategory() {
				let that=this;
			   //数据加载提示框
			   uni.showLoading({
			   	title: '拼命加载中',
			   	mask: true
			   });
			   uni.request({
			   	url:this.$store.state.URL+"/goods/category/goods_category",
			   	data:{
			   		page:"",
					pagesize:that.pagesize,
					merchantID:this.$store.state.merchantDefaultID
			   	},
			   	method:"GET",
				 success(res) {
					 console.log(res)
					 uni.hideLoading();
					 that.showclassification=true
					 that.goodsList=JSON.parse(JSON.stringify(res.data.list));
				 }
			   })
			},
			//分页加载数据
			pagingDate(commodityActive,categoryActive){
				let that=this;
				let oldlength=that.goodsList[commodityActive].list[categoryActive].goods.length;
				that.pagesize=that.pagesize+8
				uni.showLoading({
					title: '拼命加载中',
					mask: true
				});
				uni.request({
					url:this.$store.state.URL+"/goods/category/goods_category",
					data:{
						page:"",
						pagesize:that.pagesize,
						merchantID:this.$store.state.merchantDefaultID
					},
					method:"GET",
					success(res) {
						uni.hideLoading();
						that.goodsList=res.data.list;
						let newlength=that.goodsList[commodityActive].list[categoryActive].goods.length;
						if(oldlength==newlength){
							uni.showToast({
								title:"没有更多了",
								duration:1000,
								icon:"none"
							})
						}
					}
				})
			},
			//加入购物车
			toShopCar(index,commodityActive,categoryActive){
				console.log(this.goodsList[commodityActive].list[categoryActive].goods[index].id)
				let that=this;
				let id=that.goodsList[commodityActive].list[categoryActive].goods[index].id
				that.sum++
				uni.showLoading({
					title:"加入购物车中...",
					mask:true,
					duration:1000
				})
				uni.request({
					url: this.$store.state.URL+"goods/shopping_cart/add_shopping_cart",
					data: {
						token: this.$store.state.token,
						goodID: id,
						skuID: '',
						num: that.sum
					},
					success(res) {
						uni.hideLoading();
						that.sum=0;
						if(res.data.status==true){
							uni.showToast({
								title:"已加入购物车",
								duration:1000
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								duration:1000,
								icon:"none"
							})
						}
					}
				})
			},
		},
		onShow() {
			this.getCategory();
			this.height = uni.getSystemInfoSync().windowHeight;
		}
	}
</script>

<style>
  /* page{
		height: 100%;
  } */
  #search{
   margin:20upx 10%;
  }
  .search_placeholder{
  	font-size:24upx;
  	color:#333;
  	opacity: 0.7;
  }
  .search_icon{
  	position:absolute;
  	margin:15upx 25upx;
  }
  .search_input{
  	background:#f5f5f5;
  	opacity: 0.5;
  	width:550upx;
  	height:60upx;
  	padding-left:35px;
  	border-radius: 30upx;
  }
  .page-body {
  	display: flex;
	background: #F5F5F5;
	width:100%;
	height:100%;
	position: fixed;
  }
  .nav {
  	display: flex;
  	width: 100%;
  }
  .nav-left {
  	width: 20%;
	background:#fff;
  }
   .nav-top{
	  white-space: nowrap;
	  width: 100%;
  }
  .nav-top-item{
	  display: flex;
  }
  .nav-top-item view{
	  font-size:30upx;
	  padding: 28upx 0;
	  margin:0 25upx;
  }
  .nav-left-item {
  	height: 100upx;
  	font-size: 28upx;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  }
  .nav-right {
  	width: 80%;
	margin-top:30upx;
  }
  .nav-right-item {
  	width: 28%;
  	height: 220upx;
  	float: left;
  	text-align: center;
  	padding: 11upx;
  	font-size: 28upx;
  }
  .nav-right-item image {
  	width: 100upx;
  	height: 100upx;
  }
  .categoryActive {
  	color: #f2526f;
	background:#fde9ed;
  }
  .commodityActive{
	border-bottom: 2px solid #F2526F;  
	color:#F2526F;
  }
  .product_show{
  	display:flex;
  	justify-content: space-between;
  	flex-wrap: wrap;
  	margin:10upx 20upx;
  	flex-shrink: 0;
  }
  .products{
  	background:#fff;
  	border-radius: 10upx;
  	text-align: center;
  	padding:20upx 10upx;
  	width:auto;
  	height:auto;
  	margin: 10upx 0;
  }
  .products_img{
  	width:100%;
  	height:164upx;
  }
  .products_shopping_car{
  	width:46upx;
  	height:46upx;
  	float: right;
  	margin-top:10upx;
  	margin-right: 15upx;
  }
  .products_price{
  	display: inline;
  	margin-right: 16upx;
  }
  .products_price text:nth-of-type(1){
  	font-size:20upx;
  	color:#f2526f;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100upx;
	display: inline-block;
  }
  .products_price text:nth-of-type(2){
  	font-size:18upx;
  	color:#b7b7b7;
  	text-decoration: line-through;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 70upx;
	display: inline-block;
  }
  .products_text text{
  	 font-size:20upx;
  	 color:#333;
  	 line-height: 20px;
     height: 40px;
     white-space: pre-wrap;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
  	 -webkit-box-orient: vertical;
     word-wrap:break-word; 
     word-break:break-all;
  	 padding:0 10upx;
  	 text-align: left;
  	 margin-left: 10upx;
  }
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
</style>
